<template>
  <div class="withdrawal-detail-modal" v-if="visible">
    <div class="modal-overlay" @click="handleCancel"></div>
    <div class="modal-container">
      <!-- 模态框头部 -->
      <div class="modal-header">
        <h3 class="modal-title">提现申请详情</h3>
        <button class="close-button" @click="handleCancel">
          <i class="fas fa-times"></i>
        </button>
      </div>

      <!-- 模态框内容 -->
      <div class="modal-content">
        <div class="detail-row">
          <div class="detail-label">申请ID:</div>
          <div class="detail-value">{{ withdrawal.pay_money }}</div>
        </div>
        <div class="detail-row">
          <div class="detail-label">申请人:</div>
          <div class="detail-value">
            {{ withdrawal.user_name }}

            <span class="user-type" v-for="(item, index) in userTypes" :key="index">
              <div v-if="withdrawal.is_fictitious === item.value">{{ item.label }}</div>
            </span>
          </div>
        </div>
        <div class="detail-row">
          <div class="detail-label">申请时间:</div>
          <div class="detail-value">{{ withdrawal.create_time }}</div>
        </div>

        <div class="detail-row">
          <div class="detail-label">提现金额:</div>
          <div class="detail-value amount">¥{{ withdrawal.pay_money.toFixed(2) }}</div>
        </div>

        <div class="detail-row">
          <div class="detail-label">收款方式:</div>
          <div class="detail-value">

            <div v-for="(cItem, index) in payType" :key="index">
              <div v-if="withdrawal.pay_type == cItem.value">{{ cItem.label }}</div>
            </div>
          </div>
        </div>

        <div class="detail-row">
          <div class="detail-label">收款账号:</div>
          <div class="detail-value">{{ withdrawal.address }}</div>
        </div>

        <div class="detail-row">
          <div class="detail-label">状态:</div>
          <div v-for="(sItem) in payStatusData" :key="index">
            <el-tag
              class="ml-2"
              :color="sItem.color"
              v-if="withdrawal.status === sItem.value"
              >
              {{ sItem.label }}
            </el-tag>
          </div>
        </div>

        <div class="detail-row" v-if="withdrawal.update_time">
          <div class="detail-label">处理时间:</div>

          <div class="detail-value">{{ withdrawal.update_time }}</div>
        </div>

        <!-- <div class="detail-row" v-if="withdrawal.remark">
          <div class="detail-label">备注:</div>
          <div class="detail-value">{{ withdrawal.remark }}</div>
        </div> -->
      </div>

      <!-- 底部按钮 -->
      <div class="modal-footer">
        <template v-if="withdrawal.status === '待审核'">
          <button class="btn-action approve" @click="handleApprove">通过</button>
          <button class="btn-action reject" @click="handleReject">拒绝</button>
        </template>
        <template v-if="withdrawal.status === '已通过'">
          <button class="btn-action transfer" @click="handleTransfer">标记已打款</button>
        </template>
        <button class="btn-action cancel" @click="handleCancel">关闭</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

// 定义props
interface WithdrawalApplication {
  id: string;
  username: string;
  userType: string;
  applicationDate: string;
  amount: number;
  paymentMethod: string;
  accountNumber: string;
  status: string;
  remark?: string;
  processDate?: string;
  transferDate?: string;
}

interface Props {
  visible: boolean;
  withdrawal: WithdrawalApplication;
  userTypes: Array;
  payType: Array;
  payStatusData: Array;
}

// 定义事件
const emit = defineEmits<{
  (e: 'update:visible', visible: boolean): void;
  (e: 'approve', withdrawal: WithdrawalApplication): void;
  (e: 'reject', withdrawal: WithdrawalApplication): void;
  (e: 'transfer', withdrawal: WithdrawalApplication): void;
  (e: 'cancel'): void;
}>();

// 定义props
const props = withDefaults(defineProps<Props>(), {
  visible: false,
  userTypes: {},
  payType: {},
  payStatusData: {},
  withdrawal: () => ({
    id: '',
    username: '',
    userType: '',
    applicationDate: '',
    amount: 0,
    paymentMethod: '',
    accountNumber: '',
    status: '待审核',
  })
});

console.log(77777, props)

// 根据状态获取颜色
const getStatusColor = (status: string) => {
  switch (status) {
    case '待审核': return '#e6a23c';
    case '已通过': return '#409eff';
    case '已拒绝': return '#f56c6c';
    case '已打款': return '#67c23a';
    default: return '#909399';
  }
};

// 处理方法
const handleApprove = () => {
  emit('approve', props.withdrawal);
  emit('update:visible', false);
};

const handleReject = () => {
  emit('reject', props.withdrawal);
  emit('update:visible', false);
};

const handleTransfer = () => {
  emit('transfer', props.withdrawal);
  emit('update:visible', false);
};

const handleCancel = () => {
  emit('cancel');
  emit('update:visible', false);
};
</script>

<style scoped lang="scss">
$primary: #409eff;
$success: #67c23a;
$warning: #e6a23c;
$danger: #f56c6c;
$info: #909399;
$text-primary: #303133;
$text-regular: #606266;
$text-secondary: #909399;
$border-color: #ebeef5;
$border-light: #f2f6fc;
$background: #f5f7fa;

.withdrawal-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.modal-container {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 550px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid $border-light;

  .modal-title {
    font-weight: 600;
    font-size: 18px;
    color: $text-primary;
    margin: 0;
  }

  .close-button {
    background: none;
    border: none;
    font-size: 18px;
    color: $text-secondary;
    cursor: pointer;

    &:hover {
      color: $text-primary;
    }
  }
}

.modal-content {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.detail-row {
  display: flex;
  margin-bottom: 16px;

  .detail-label {
    width: 100px;
    color: $text-secondary;
    font-size: 14px;
  }

  .detail-value {
    flex: 1;
    color: $text-primary;
    font-size: 14px;

    &.amount {
      color: #ff7043;
      font-weight: 500;
    }
  }
}

.user-type {
  display: inline-block;
  padding: 0 6px;
  margin-left: 8px;
  line-height: 18px;
  font-size: 12px;
  border-radius: 10px;

  &.agent {
    background-color: #ecf5ff;
    color: $primary;
  }

  &.distributor {
    background-color: #f0f9eb;
    color: $success;
  }
}

.status-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid $border-light;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.btn-action {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid $border-color;

  &.cancel {
    background-color: white;
    color: $text-regular;

    &:hover {
      background-color: $background;
      color: $text-primary;
    }
  }

  &.approve {
    border-color: $success;
    color: $success;

    &:hover {
      background-color: lighten($success, 42%);
    }
  }

  &.reject {
    border-color: $danger;
    color: $danger;

    &:hover {
      background-color: lighten($danger, 38%);
    }
  }

  &.transfer {
    border-color: $primary;
    color: $primary;

    &:hover {
      background-color: lighten($primary, 38%);
    }
  }
}

@media (max-width: 576px) {
  .detail-row {
    flex-direction: column;

    .detail-label {
      width: 100%;
      margin-bottom: 4px;
    }
  }

  .modal-container {
    max-height: 90vh;
  }
}
</style>
